<template>
  <div class="price-trend-paeg">
    <el-card class="box-card" style="width: 100%; border: none;" shadow="never">
      <el-row :gutter="20" class="num-card">
        <el-col :span="8">
          <div class="item">
            <span>今日币价</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计成交数量</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计成交金额</span>
            <p>12312.0012</p>
            <em />
          </div>
        </el-col>
      </el-row>

      <el-form :inline="true" label-position="top" :model="searchForm" class="demo-form-inline">
        <el-form-item label="查询时间" size="small" style="margin-right: 20px">
          <el-date-picker
            v-model="searchForm.datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="操作" size="small">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; border: none; margin: 20px 0;" shadow="never">
      <div>
        <el-button icon="el-icon-download" size="small" type="primary" @click="exportData">导出</el-button>
        <el-button icon="el-icon-plus" size="small" type="primary" @click="()=>{addTrendVisible = true}">增加行情</el-button>
        <el-button icon="el-icon-data-line" size="small" type="primary" @click="()=>{setTrendVisible = true}">设置行情</el-button>
        <el-button icon="el-icon-bell" size="small" type="primary" @click="openEditor">设置弹窗公告</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData.filter(data => data.name.toLowerCase())"
        style="width: 100%; margin-top: 20px"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />

        <el-table-column
          label="会员UID"
          prop="date"
        />
        <el-table-column
          label="会员手机"
          prop="name"
        />
        <el-table-column
          label="待划转音值"
          prop="name"
        />
        <el-table-column
          label="音值"
          prop="name"
        />
        <el-table-column
          label="音波"
          prop="name"
        />

        <el-table-column
          label="冻结音波"
          prop="name"
        />

        <el-table-column
          label="今日买入音值"
          prop="name"
        />

        <el-table-column
          label="今日卖出音值"
          prop="name"
        />

        <el-table-column
          label="信用度"
          prop="name"
        />

        <el-table-column
          label="身份证号"
          prop="name"
        />

        <el-table-column
          label="状态"
          prop="name"
        />

        <el-table-column
          label="注册时间"
          prop="name"
        />

        <el-table-column
          label="最后登录时间"
          prop="name"
        />

        <el-table-column
          label="登录IP"
          prop="name"
        />

        <el-table-column
          label="常用地"
          prop="name"
        />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right: 10px"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-popconfirm
              title="确定冻结该用户吗？"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >冻结</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>

    <el-dialog title="增加行情" width="520px" :visible.sync="addTrendVisible">
      <el-tabs type="card">
        <el-tab-pane label="单个增加">
          <el-form size="small" :model="addTrendForm" label-width="50px">
            <el-form-item label="币价">
              <el-input-number v-model="addTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入币价" />
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="addTrendForm.id"
                align="right"
                type="date"
                placeholder="请选择日期"
                :picker-options="pickerOptions"
              />
              <el-tooltip content="每个日期的货币价格是唯一的，不能创建多个记录" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="批量增加">
          <el-form size="small" :model="addTrendForm" label-width="80px">
            <el-form-item label="币价">
              <el-input-number v-model="addTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入币价" />
            </el-form-item>
            <el-form-item label="涨跌幅度">
              <el-input-number v-model="addTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入涨跌幅度" />
              <el-tooltip content="批量递增设定日期的参考价" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="addTrendForm.id"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-tooltip content="每个日期的货币价格是唯一的，不能创建多个记录" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>

    </el-dialog>

    <el-dialog title="设置行情" width="720px" :visible.sync="setTrendVisible">
      <el-form size="small" :model="setTrendForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设置挂单数量">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入设置挂单数量" />
              <el-tooltip content="能挂委托单的数量" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="挂单单价设置">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入挂单单价%" />
              <el-tooltip content="上下浮动价格" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="挂单数量限制">
              <div style="display: flex;align-items: center;">
                <el-slider
                  v-model="setTrendForm.fw"
                  range
                  show-stops
                  :max="20"
                  style="width: 500px;"
                />
                <!-- <el-tooltip content="上下浮动价格" placement="top">
              <i style="margin-left: 10px" class="el-icon-question" />
            </el-tooltip> -->
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="开市时间设置">
              <el-time-picker
                v-model="setTrendForm.fw"
                is-range
                range-separator="至"
                start-placeholder="开市时间"
                end-placeholder="闭市时间"
                placeholder="选择时间范围"
                style="width: 220px"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="取消订单限制">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入取消订单限制" />
              <el-tooltip content="设置用户取消订单次数/天" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="开市日期设置">
              <el-checkbox-group v-model="setTrendForm.fw">
                <el-checkbox label="周一" />
                <el-checkbox label="周二" />
                <el-checkbox label="周三" />
                <el-checkbox label="周四" />
                <el-checkbox label="周五" />
                <el-checkbox label="周六" />
                <el-checkbox label="周日" />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="走势图倍率">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入走势图倍率" />
              <el-tooltip content="设置后OTC转让中心显示数据会x倍率，币价不受影响" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="USD汇率">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入USD汇率" />
              <el-tooltip content="USD兑换CNY" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="挂单信用度">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入挂单信用度" />
              <el-tooltip content="低于信用度不能挂单" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户访问限制">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入用户访问限制" />
              <el-tooltip content="设置用户访问委托单最高限制每分钟访问多少次" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="最高卖出数量">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入最高卖出数量" />
              <el-tooltip content="设置用户每天卖出最高交易限额/天" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="最高卖入数量">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入最高卖入数量" />
              <el-tooltip content="设置用户每天买入最高交易限额/天" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="订单手续费">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="买方挂单手续费" />
              <el-input-number v-model="setTrendForm.id" style="margin-left: 20px" :precision="4" controls-position="right" :min="1" placeholder="卖方转让手续费" />
              <el-input-number v-model="setTrendForm.id" style="margin-left: 20px" :precision="4" controls-position="right" :min="1" placeholder="划转出APP手续费" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="转让取消时间">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入最高卖出数量" />
              <el-tooltip content="设置用户转让时不操作系统自动取消时间/分钟" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="买家取消时间">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入买家取消时间" />
              <el-tooltip content="设置买家待付款系统自动取消时间/分钟" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="卖家取消时间">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入卖家取消时间" />
              <el-tooltip content="设置待付款时卖家可取消订单的时间/分钟" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="自动放币时间">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入自动放币时间" />
              <el-tooltip content="设置系统自动放币的时间/分钟" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="买入冻结时间">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入买入冻结时间" />
              <el-tooltip content="设置系统冻结买入音值的时间/小时" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="异地登录限制">
              <el-input-number v-model="setTrendForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入异地登录限制" />
              <el-tooltip content="判断常在城市，非常在城市判断为异地登录，登录时提示限制0为不限制" placement="top">
                <i style="margin-left: 10px" class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="弹窗公告" width="520px" :visible.sync="setNoticeVisible">
      <div class="tinymce-editor">
        <editor id="tinymce" v-model="myValue" :init="init" />
        <div style="margin: 20px auto; text-align: center;">
          <el-button size="small" type="primary" @click="submitAgreement">保存</el-button>
          <el-button size="small">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

export default {
  name: 'PriceTrend',
  components: { Editor },
  data() {
    return { pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date())
        }
      }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', date)
        }
      }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', date)
        }
      }]
    },
    searchForm: {
      datetime: ''
    },
    tableData: [{
      id: 1,
      name: '123'
    }
    ],
    addTrendForm: {
      id: ''
    },
    setTrendForm: {
      id: '',
      fw: [3, 17]
    },
    multipleSelection: [],
    addTrendVisible: false,
    setTrendVisible: false,
    setNoticeVisible: false,
    myValue: '',
    init: {
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/tinymce/skins/ui/oxide', // skin路径
      height: 400, // 编辑器高度
      menubar: true, // 顶部菜单栏显示
      branding: true, // 去水印
      elementpath: false, // 禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      plugins: 'image table media lists wordcount'
    }
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    // 搜索查询
    searchSubmit() {
      alert('搜索')
    },
    // 导出
    exportData() {
      alert('导出')
    },
    // rt
    openEditor() {
      this.setNoticeVisible = true
      this.$nextTick(() => {
        tinymce.init({}).then(() => {
          tinymce.activeEditor.setContent('<p>请开始你的表演</p>')
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './style.scss'
</style>
